如何將 Vue 3 與 ASP.NET Razor 一起使用

TLDR

• 建議在輕量級或非建置工具（Build Tools）環境下，使用 Vue 3 的 Options API。
• 透過自定義 TagHelper，可將 ASP.NET Core 的 DataAnnotations 自動轉換為 VeeValidate 的驗證規則。
• 整合時需注意 v-cloak 樣式設定，避免頁面載入時出現原始模板。
• 透過 Axios Interceptors 處理 RequestVerificationToken，以滿足 ASP.NET Core 的防偽驗證需求。
• 經實測，此架構在處理 asp-page-handler 與 DisplayName 顯示上存在相容性問題，建議評估後續維護成本。

---

Vue 3 與 Options API 的適用場景

在 ASP.NET Razor Pages 專案中，若未引入複雜的前端建置工具，建議採用 Vue 3 的 Options API。根據官方建議，Options API 對於低至中等複雜度的場景（如 Progressive Enhancement）依然是穩定的選擇，且無廢棄計畫。

整合架構與核心實作

1. 基礎環境設定

在 _Layout.cshtml 中引入 Vue 3 與 VeeValidate 相關套件。需特別注意 v-cloak 的 CSS 設定，以隱藏未編譯完成的 Vue 模板：

[v-cloak] {
    display: none;
}

2. 處理 ASP.NET 防偽驗證 (Anti-Forgery)

為了讓 Axios 的 AJAX 請求能通過 ASP.NET Core 的 ValidateAntiForgeryToken 檢查，需在 site.js 中設定攔截器：

axios.interceptors.request.use(
    config => {
        let token = document.querySelector('input[name="__RequestVerificationToken"]');
        if (token !== null) {
            config.headers = {
                RequestVerificationToken: token.value
            }
        }
        return config;
    }
);

3. 自動化驗證規則轉換 (TagHelper)

什麼情況下會遇到這個問題：當希望將後端 C# 的 DataAnnotations（如 [Required], [EmailAddress]）直接對應到前端 VeeValidate 驗證規則時。

透過自定義 VeeValidateInputTagHelper，可以攔截 asp-for 屬性，並將驗證屬性轉換為 rules 字串：

private string? GetRules() {
    List<string> items = new List<string>();
    // 範例：將 DataAnnotations 轉換為 VeeValidate 規則
    foreach (var validationAttribute in For.Metadata.ValidatorMetadata) {
        switch (validationAttribute) {
            case RequiredAttribute _:
                items.Add("required");
                break;
            case EmailAddressAttribute _:
                items.Add("email");
                break;
            // 其他規則轉換...
        }
    }
    return items.Any() ? $"{string.Join("|", items)}" : null;
}

已知問題與限制

WARNING

在 2024 年的測試中發現，此架構存在以下技術限制：

• VeeValidateFormTagHelper 產生的 <v-form> 會導致 asp-page-handler 無法正常運作。
• 錯誤訊息無法正確解析 DisplayName 等 Attribute 設定的欄位名稱。

由於上述問題，若專案對表單處理的依賴度較高，建議審慎評估此整合方式，或考慮轉向使用 ASP.NET Core Blazor，以避免前端框架改版帶來的維護負擔。

異動歷程

1. 2023-01-30

   • 初版文件建立。
2. 2024-04-07

   • 補充了文章架構未處理的問題。